<template>
	<view class="">
		<view class="leaveFormWrap">
			<uni-forms ref="dynamicForm" :rules="rules" :modelValue="formData" :label-width="100">
				<uni-forms-item label="请假类型:" required name="leaveType">
				     <uni-data-picker :localdata="leaveTypeLst" popup-title="请选择请假类型" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="开始时间:" required name="startTime">
				    <uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20"/>
				</uni-forms-item>
				<uni-forms-item label="结束时间:" required name="endTime">
				    <uni-datetime-picker returnType="timestamp" @change="changeLog($event)" start="2021-3-20"/>
				</uni-forms-item>
				<uni-forms-item label="请假事由:" required name="reason">
				   <uni-easyinput type="textarea" v-model="formData.reason" placeholder="请输入请假事由" />
				</uni-forms-item>
				<uni-forms-item label="请假天数:" required name="days">
				   <uni-easyinput  v-model="formData.days" placeholder="请输入请假事由" />
				</uni-forms-item>
				<uni-forms-item label="假期余额:" >
				   <view class="leaveTxt">今年可请天数：5.00</view>
				   <view class="leaveTxt">已使用天数：0.00</view>
				   <view class="leaveTxt">剩余可请天数：5.00</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<button class="button-group" @click="submit('dynamicForm')">提交</button>
	</view>
</template>

<script>
export default {
	name: '',
	components: {
	},
	data() {
		return {
			curTime:'',
			leaveTypeLst: [{
			  text: "事假",
			  value: "0",
			 },
			{
			  text: "病假",
			  value: "1"
			},
			{
			  text: "婚假",
			  value: "2"
			},{
			  text: "调休",
			  value: "3"
			}],
			roomSituationIndex:0,
			// 数据源
			formData: {
				leaveType:'',
				startTime:'',
				endTime:'',
				reason:'',
				days:null
			},
			// 规则
			rules: {
				reason: {
					rules: [{
						required: true,
						errorMessage: '请假事由不能为空'
					}]
				},
				days:{
					rules: [{
						required: true,
						errorMessage: '请假天数不能为空'
					},{
						format:'number',
						errorMessage:'请输入数字'
					}]
				},
				leaveType:{
					rules:[{
						required:true,
						errorMessage: '类型不能为空'
					}]
				},
				startTime:{
					rules:[{
						required:true,
						errorMessage: '开始时间不能为空'
					}]
				},
				endTime:{
					rules:[{
						required:true,
						errorMessage: '结束时间不能为空'
					}]
				}
			}
		}
	},
	methods: {
		onchange(e) {
			const value = e.detail.value
			this.formData.leaveType = value
		},
		onnodeclick(node) {
		},
		changeLog(){
			
		},
		submit(formName) {
			this.$refs[formName].validate().then(res=>{
				console.log('表单数据信息：', res);
			}).catch(err =>{
				console.log('表单错误信息：', err);
			})
		}
	}
};
</script>

<style scoped lang="scss">
.leaveFormWrap{
	padding: 41.66rpx;
}	
.button-group{
	height: 83.33rpx;
	background-color: $themeColor;
	color: #fff;
	border-radius: 0;
	width: 100%;
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	bottom:0;
	&:active{
		background-color:darken($color: $themeColor, $amount:6);
	}
}
.leaveTxt{
	color: #333;
	font-size:27.08rpx;
	padding: 6.25rpx 0;
}
</style>
